<template>
	<div class="phrase_flex">
		<div class="phrase_item">
			<div class="phrase_personal">
				<img class="phrase_avaimg" src="../../public/image/mark.png">
				<div class="phrase_ring">
					<span class="phrase_fan"><p class="phrase_name cycle_switch">逸曦穆泽</p></span>
				</div>
				<p class="phrase_describe">{{title}}</p>
			</div>
		</div>
		<div class="phrase_item">
			<div class="phrase_gossip">
				<p class="phrase_tle"><img class="phrase_icon" src="../../public/image/blog/new.png">闲言碎语</p>
				<div class="phrase_scroll" id="scroll">
					<div class="phrase_box" id="content">
						<p>生活，本就是一场修行</p>
						<p>什么喜怒哀乐</p>
						<p>什么柴米油盐</p>
						<p>什么酸甜苦辣</p>
						<p>痛苦中的坚强与崩溃</p>
						<p>快乐中的喜悦与沉溺</p>
						<p>不知道你是否在思考</p>
						<p>人生，就是一场旅行</p>
						<p>没有方向</p>
						<p>没有来回</p>
						<p>没有目的</p>
						<p>故事一直在编，凡事一直在演，都打个半折</p>
						<p>情绪不会失真，心态不至于失衡</p>
						<p>是风还是雨，可能就是个段子</p>
						<p>都说凡事不过三，可是有的事，一次就够了</p>
						<p>不知从何时起，习惯了安静</p>
						<p>不知从何处起，热切了孤独</p>
						<p>没有思考过要获得什么，又何来失去什么</p>
						<p>谁也不知道意外和明天哪个先来</p>
						<p>毕竟做人在意识上也是头一回</p>
						<p>规矩都前人定或后天按下</p>
						<p>我曾跨过山巅，也曾走过低谷</p>
						<p>二者都令我受益良多</p>
						<p>人生本是生活的影子</p>
						<p>情绪这个感觉很奇妙</p>
						<p>不曾控制与影响</p>
						<p>生活依旧，人生共勉，黎明的色彩才会迷人</p>
						<p>早起早睡，年轻人</p>
						<br>
					</div>
					<div class="phrase_box" id="copyContent"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { ref,onMounted } from 'vue'
	export default{
		props: {
		    title: String
		},
		setup(props) {
			// console.log(props)
			onMounted(()=>{
				var scroll = document.getElementById("scroll");
				var content = document.getElementById("content");
				var copyContent = document.getElementById("copyContent");
				copyContent.innerHTML = content.innerHTML;
				setInterval(function () {
					// scrollTop 滚动的距离  offsetTop 当前元素离顶部的距离
					if (scroll.scrollTop >= copyContent.offsetTop - content.offsetTop) {
						scroll.scrollTop = 0;
					}
					scroll.scrollTop++;
				}, 60);
			});
		},
	}
</script>

<style>
	.phrase_flex{display: flex;}
	/* 头部小言 */
	.phrase_item{flex:1;text-align: center;background:cadetblue;}
	.phrase_item:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px;}
	.phrase_item:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px;}
	.phrase_personal{position: relative;height:318px;text-align: center;padding:30px 15px;}
	.phrase_personal .phrase_avaimg{width:200px;border-radius: 50%;}
	.phrase_personal .phrase_ring{display:inline-block;width:220px;height:220px;border-radius:50%;position:absolute;left: 50%;top:41%;transform: translate(-50%, -50%);}
	.phrase_personal .phrase_ring:before{content: "";display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;border: 10px solid rgba(0,0,0,.3);}
	.phrase_personal .phrase_fan:before{content: "";display: block;width: 100%;height: 50%;background: none;border: 10px solid aquamarine;box-sizing: border-box;border-top-left-radius: 110px;border-top-right-radius: 110px;border-bottom: 0;-webkit-transform-origin: center bottom;transform-origin: center bottom;animation:loop 3s forwards infinite;}
	@keyframes loop{ 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
	.phrase_personal .phrase_name{display:inline-block;margin-top: 50px;font-weight: bold;}
	.phrase_personal .phrase_describe{font-size:16px;margin-top:20px;}
	.phrase_gossip{height:320px;text-align: center;padding:30px 15px;}
	.phrase_gossip .phrase_tle{font-size: 20px;font-weight: bold;margin:0 20px 10px;}
	.phrase_gossip .phrase_icon{width:20px;margin-right: 3px;}
	.phrase_gossip .phrase_scroll{height:225px;margin:auto;overflow:hidden;}
	.phrase_gossip .phrase_scroll .phrase_box{padding:0 20px;margin: 0;}
	.phrase_gossip .phrase_scroll .phrase_box p{margin:3px auto;color:#ffcc66;}
	@media only screen and (max-width:768px){
		.phrase_flex{display: block;}
	}
</style>
